<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			/*透视*/
			body{
				perspective: 800px;
				perspective-origin: 50% -10%;
			}
			#box{
				width: 500px;
				height: 500px;
				margin: 150px auto;
				position: relative;
				/*background: rgba(255,0,0,0.5);*/
				transform-style: preserve-3d;
				animation: hd 10s infinite linear;
			}
			@keyframes hd{
				0%{transform: rotateY(0deg);}
				50%{transform: rotateY(180deg);}
				100%{
					transform: rotateY(360deg);
				}
			}	
			#box img{
				width: 300px;
				position: absolute;
				left: 100px;
				top: 90px;
				
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="./shanghai.jpg"/>
			<img src="./shanghai.jpg"/>
			<img src="./shanghai.jpg"/>
			<img src="./shanghai.jpg"/>
			<img src="./shanghai.jpg"/>
			<img src="./shanghai.jpg"/>
			<img src="./shanghai.jpg"/>
			<img src="./shanghai.jpg"/>
		</div>
	</body>
	<script type="text/javascript">
		
	var imglist = document.getElementById("box").getElementsByTagName('img');
	
	var jiaodu = 360 / imglist.length;
		
	for (var i=0;i<imglist.length;i++) {
		
		var width = imglist[0].offsetWidth;
		
		r = width/2/Math.tan(jiaodu/2*Math.PI/180);
		
		var d = jiaodu *i;
		imglist[i].style.transform = 'rotateY('+d+'deg) translateZ('+r+'px)';
	}
		
		
		
		
		
		
		
		
		
		
	</script>
</html>
